<script setup>
import { useCrawlerStore } from '../stores/crawler'
import { ElMessage } from 'element-plus'

const crawlerStore = useCrawlerStore()

const handleStart = async () => {
  try {
    await crawlerStore.start()
    ElMessage.success('爬虫启动成功')
  } catch (error) {
    ElMessage.error(`启动失败: ${error.message}`)
  }
}

const handleStop = async () => {
  try {
    await crawlerStore.stop()
    ElMessage.success('爬虫已停止')
  } catch (error) {
    ElMessage.error(`停止失败: ${error.message}`)
  }
}
</script>

<template>
  <div class="crawler-control">
    <el-button 
  type="primary" 
  :loading="crawlerStore.isLoading"
  @click="handleStart"
  :disabled="crawlerStore.isLoading || crawlerStore.status.isRunning"
>
  启动爬虫
</el-button>
    <el-button 
    type="danger" 
    :loading="crawlerStore.isLoading"
    @click="handleStop"
    :disabled="!crawlerStore.status.isRunning"
  >
    停止爬虫
  </el-button>
    
    <div class="status-info" v-if="crawlerStore.status.lastStartTime">
      <p>状态: {{ crawlerStore.status.isRunning ? '运行中' : '已停止' }}</p>
      <p>最后启动时间: {{ crawlerStore.status.lastStartTime }}</p>
      <p>进程ID: {{ crawlerStore.status.pid || '无' }}</p>
    </div>
  </div>
</template>

<style scoped>
.crawler-control {
  display: flex;
  gap: 10px;
  align-items: center;
}

.status-info {
  margin-left: 20px;
  font-size: 14px;
  color: #666;
}

.status-info p {
  margin: 5px 0;
}
</style>